import { useState, useEffect } from 'react';

export const App = () => {
  const [count, setCount] = useState(0);
  const [number, setNumber] = useState(0);

  // 1、只传递一个回调函数。
  //   useEffect(() => {
  //     // 1 第一次渲染 2 组件状态发生变化（多个状态中的任何一个变化）
  //     console.log('1、只传递一个回调函数。');
  //   });

  // 2、没有依赖。常用
  //   useEffect(() => {
  //     // componentDidMount，发起网络数据请求，添加全局事件
  //     console.log('2、没有依赖。');
  //   }, []);

  // 3，添加对应的依赖项
  // 常用
  // 触发时机：1 第一次渲染 2 组件状态count变化时
  // componentDidMount + componentDidUpdate
  //   useEffect(() => {
  //     // 1 第一次渲染 2 组件状态 count 变化时
  //     console.log(count);
  //   }, [count]);

  // 4
  // 触发时机：1 第一次渲染 2 组件卸载时
  // componentDidMount + componentWillUnmount
  //   useEffect(() => {
  //     // 1 第一次渲染 componentDidMount
  //     console.log('componentDidMount');
  //     return () => {
  //       // 2 组件卸载时 componentWillUnmount
  //       console.log('componentDidMount');
  //     };
  //   }, []);

  // 5
  // 触发时机：1 第一次渲染 2 组件状态count变化时 3 组件卸载时
  useEffect(() => {
    // 1 第一次渲染 componentDidMount
    console.log('第一次渲染以及count发生变化都要执行', count);
    return () => {
      // 2 组件状态count变化时
      // 3 组件卸载时 componentDidUpdate + componentWillUnmount
      console.log('count 的每次变化导致的UI更新，我都要做对应的处理，xxxx');
    };
  }, [count]);

  return (
    <div>
      <h1>count：{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <h1>number：{number}</h1>
      <button onClick={() => setNumber(number + 1)}>+1</button>
    </div>
  );
};
